<template>
  <view>
    <view class="cart-list">
      <block v-for="(item, index) in cartList" :key="item[selectKey]">
        <view v-if="item.product" class="shop-cart">
          <uni-icons
            class="delete-icon"
            color="#ff0000"
            @click="handleCartDelete(index)"
            type="clear"
            size="42rpx"
          ></uni-icons>
          <view class="shop-info">
            <view
              class="checkbox"
              @click="handleTriggerSelect(item)"
              :class="
                selectCartList.includes(item[selectKey]) ? 'selected' : ''
              "
            >
              <uni-icons
                class="selected-icon"
                v-if="selectCartList.includes(item[selectKey])"
                type="checkmarkempty"
                color="#ffffff"
                size="28rpx"
              ></uni-icons>
            </view>
            <image
              mode="aspectFill"
              class="shop-image"
              :src="item.variant.image_url || item.product.image_url"
              @click="handleToDetail(item)"
            ></image>
          </view>
          <view class="basic">
            <view class="shop-name" @click="handleToDetail(item)">{{
              item.product.name
            }}</view>
            <view class="tag-list" v-if="item.product.category">
              <my-tag
                type="small"
                :tagList="[item.product.category]"
                tagShowName="name"
                tabValueName="id"
              ></my-tag>
            </view>
            <u-text
              :text="item.variant.attributes.map((i) => i.value).join(';')"
              size="14"
              color="info"
            ></u-text>

            <view class="basic-footer">
              <view class="price-content">
                <view class="unit">￥</view>
                <view class="price" v-if="item.variant.sale_price">
                  <text v-if="item.promotional_variant">
                    <text>{{ item.promotional_variant.amount }}</text>
                    <text class="old-price">
                      ￥{{ item.variant.sale_price }}
                    </text>
                  </text>
                  <text v-else>
                    {{ (item.variant.sale_price / 1).toFixed(2) || "--" }}
                  </text>
                </view>
                <view class="price" v-else>???</view>
              </view>
              <view class="cart-num">
                <view
                  class="minus"
                  @click="handleOperateCount({ type: 'del', item, index })"
                >
                  <up-icon name="minus" color="#999999" size="14"></up-icon>
                </view>
                <view class="count">
                  {{ item.quantity }}
                </view>
                <view
                  class="plus"
                  @click="handleOperateCount({ type: 'add', item, index })"
                >
                  <up-icon name="plus" color="#ffffff" size="14"></up-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view v-if="cartList.length <= 0" class="empty">
      <image mode="widthFix" class="empty-image" src="./empty.png"></image>
      <view class="empty-text">购物车空空如也</view>
    </view>
    <view class="product-list">
      <u-text align="center" text="猜你喜欢" size="14" bold></u-text>
      <u-gap height="10"></u-gap>
      <my-waterfalls-flow
        ref="waterfallsFlowRef"
        :value="productList"
        :column="2"
        :columnSpace="1.5"
        :seat="2"
        imageKey="image_url"
      >
        <!-- #ifdef MP-WEIXIN -->
        <view
          class="demo-warter"
          v-for="(item, index) in productList"
          :key="index"
          slot="slot{{index}}"
        >
          <view class="demo-title">
            {{ item.name }}
          </view>
          <view class="sub_title">
            {{ item.min_sale_quantity }} {{ item.uom.name }}起订
          </view>
          <view class="product-bottom">
            <view class="demo-price">
              <view
                v-if="item.sale_price"
                style="color: #ccc; text-decoration: line-through; size: 24rpx"
              >
                ￥{{ item.default_variant.guiding_price }}
              </view>
              <view>
                ￥{{
                  item.sale_price ? item.default_variant.sale_price : "***"
                }}
              </view>
            </view>
            <view
              style="
                font-size: 24rpx;
                color: #999999;
                display: flex;
                align-items: center;
              "
              class="tips"
              v-if="item.sale_price == null"
            >
              入驻查看价格
              <u-icon name="arrow-right" size="15" color="#999999"></u-icon>
            </view>
            <view v-else>
              <u-icon name="/static/images/icon/cart.png" size="58rpx"></u-icon>
            </view>
          </view>
        </view>
        <!-- #endif -->
      </my-waterfalls-flow>
    </view>

    <view class="cart-footer" v-if="cartList.length">
      <view class="cart-footer-top">
        <view class="satisfy-price" v-if="wanting_priec > 0">
          <text>满{{ satisfy_price }}元起送，</text>
          <text class="wanting-priec">还差{{ wanting_priec }}元</text>
        </view>
        <view class="satisfy-price" v-else>
          <text>已满{{ satisfy_price }}元可配送</text>
        </view>

        <view class="round-btn" @click="onJumpGoods" v-if="wanting_priec > 0">
          去凑单
          <up-icon name="arrow-right" size="14" color="#ffffff"></up-icon>
        </view>
      </view>
      <view class="footer-content">
        <view class="cart-select" @click="handleTrigerSelectAll">
          <template v-if="cartList.length">
            <view class="checkbox" :class="selectedAll ? 'selected' : ''">
              <uni-icons
                v-if="selectedAll"
                class="selected-icon"
                type="checkmarkempty"
                size="28rpx"
                color="#ffffff"
              ></uni-icons>
            </view>
            全选
          </template>
        </view>
        <view class="cart-button">
          <view class="cart-button-left">
            <view class="total-money">
              合计:
              <view class="price-content">
                <view class="unit">￥</view>
                <view class="price">{{ selectedPrice.toFixed(2) }}</view>
              </view>
            </view>
            <view class="total-qty"
              >共{{ selectCartList.length }}种{{ totalProductQty }}件</view
            >
          </view>
          <view>
            <view class="cart-submit selection" @click="handleSelection"
              >加入云店</view
            >
            <view class="cart-submit" @click="handleSubmit">提交订单</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    cartList: {
      type: Array,
      default: () => [],
    },
    selectCartList: {
      type: Array,
      default: () => [],
    },
    selectKey: {
      type: String,
      default: "id",
    },
  },
  watch: {
    selectCartList: {
      handler() {
        this.calculatePrice();
      },
      deep: true,
    },
  },
  data() {
    return {
      wanting_priec: 0, //距离满减还差多少字段
      totalProductQty: 0,
      selectedAll: false,
      selectedPrice: 0,
      productList: [],
    };
  },
  computed: {
    //满多少钱起送，该字段后续需接口返回
    satisfy_price() {
      return this.$store.getters.satisfyPrice;
    },
  },
  methods: {
    async getProductList() {
      const response = await this.$store.dispatch("fetchOrderHistory");
      if (response.records.length) {
        this.productList = response.records;
      } else {
        const response = await this.$store.dispatch("fetchGoodsList", {
          is_new_recommend: 1,
        });
        if (response.records.length) {
          this.productList = response.records;
        }
      }
    },
    onJumpGoods() {
      uni.navigateTo({
        url: "/pages/goods/list",
      });
    },
    handleOperateCount(params) {
      this.$emit("operateCount", params);
    },
    handleTriggerSelect(item) {
      this.$emit("triggerSelect", item);
    },
    handleTrigerSelectAll(item) {
      this.$emit("triggerSelectAll", this.selectedAll);
    },
    handleToDetail(item) {
      this.$emit("toDetail", item);
    },
    handleCartDelete(index) {
      this.$emit("cartDelete", index);
    },
    handleSubmit() {
      if (this.wanting_priec > 0) {
        return uni.showToast({
          title: `未满${this.satisfy_price}元，还差${this.wanting_priec}元，快去凑单吧~`,
          icon: "none",
        });
      }
      this.$emit("submit");
    },
    handleSelection() {
      this.$emit("selection");
    },
    calculatePrice() {
      let price = 0;
      const len = this.cartList.length;
      const selectedList = this.cartList.filter((item) =>
        this.selectCartList.includes(item[this.selectKey])
      );
      this.selectedPrice = selectedList.reduce((price, item) => {
        const bprice = item.promotional_variant
          ? item.promotional_variant.amount
          : item.variant.sale_price;
        return price + item.quantity * bprice;
      }, 0);
      this.totalProductQty = selectedList.reduce((quantity, item) => {
        return quantity + item.quantity;
      }, 0);

      let total = this.satisfy_price - this.selectedPrice;
      if (total > 0) {
        this.wanting_priec = total.toFixed(2);
      } else {
        this.wanting_priec = 0;
      }

      this.selectedAll = len && len === this.selectCartList.length;
    },
  },
  async mounted() {
    this.getProductList();
  },
};
</script>

<style lang="scss" scoped>
.cart-list {
  // padding-bottom: 60px;
}

.product-list {
  padding-bottom: 60px;
}

.checkbox {
  display: flex;
  justify-items: center;
  align-items: center;
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  margin: 0 24rpx 0 8rpx;

  &.selected {
    border: 2rpx solid transparent;
    background: linear-gradient(to right, #3cb9ef, #08daf5);

    .selected-icon {
      margin: 2rpx;
    }
  }
}

.price-content {
  display: flex;
  align-items: flex-end;
  color: rgb(225, 76, 68);
  font-weight: 600;

  .unit {
    font-size: 24rpx;
  }

  .price {
    font-size: 28rpx;

    .old-price {
      color: #ccc;
      text-decoration: line-through;
      margin-left: 5px;
    }
  }
}

.shop-cart {
  background: #fff;
  margin: 16rpx;
  padding: 16rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  display: flex;
  position: relative;

  .delete-icon {
    position: absolute;
    top: -12rpx;
    right: -12rpx;
  }

  .shop-info {
    display: flex;
    align-items: center;

    .shop-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
    }
  }

  .basic {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10rpx 16rpx;

    .shop-name {
      font-size: 26rpx;
    }

    .tag-list {
      flex: 1;
      margin-top: 8rpx;
    }

    .basic-footer {
      display: flex;
      justify-content: space-between;

      .cart-num {
        display: flex;
        align-items: center;

        .count {
          font-size: 28rpx;
          width: 80rpx;
          text-align: center;
        }

        .minus {
          width: 44rpx;
          height: 44rpx;
          border-width: 1px;
          border-color: #999999;
          border-style: solid;
          border-top-left-radius: 100px;
          border-top-right-radius: 100px;
          border-bottom-left-radius: 100px;
          border-bottom-right-radius: 100px;
          @include flex;
          justify-content: center;
          align-items: center;
        }

        .qty-input {
          text-align: center;
          padding: 0 10px;
          color: #000;
          font-size: 28rpx;
          display: inline-block;
        }

        .plus {
          width: 44rpx;
          height: 44rpx;
          // background-color: #3cb9ef;
          background-color: #66e87b;
          border-radius: 50%;
          /* #ifndef APP-NVUE */
          display: flex;
          /* #endif */
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 750rpx;

  .empty-image {
    width: 600rpx;
    margin-top: 48rpx;
  }

  .empty-text {
    text-align: center;
    color: rgba(0, 0, 0, 0.4);
  }
}

.cart-footer {
  position: fixed;
  bottom: 190rpx;
  left: 24rpx;

  .cart-footer-top {
    width: 702rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    // background: linear-gradient(to right, #3cb9ef, #08daf5);
    background-color: #66e87b;
    border-radius: 16rpx 16rpx 0 0;

    .satisfy-price {
      font-size: 26rpx;
      color: #ffffff;

      .wanting-priec {
        color: #ffeb3b;
      }
    }

    .round-btn {
      font-size: 26rpx;
      display: flex;
      align-items: center;
      color: #ffffff;
    }
  }

  .footer-content {
    width: 702rpx;
    font-size: 28rpx;
    padding: 24rpx;
    background: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 0 0 16rpx 16rpx;
    box-sizing: border-box;

    .cart-select {
      display: flex;
      align-items: center;
    }

    .cart-button {
      display: flex;
      align-items: center;

      .cart-button-left {
        font-size: 28rpx;

        .total-money {
          display: flex;
          align-items: center;
        }

        .total-qty {
          font-size: 26rpx;
          text-align: right;
          color: #999999;
        }
      }

      .cart-submit {
        font-size: 28rpx;
        margin-left: 24rpx;
        // background: linear-gradient(to right, #3cb9ef, #08daf5);
        background-color: #66e87b;
        color: #ffffff;
        border-radius: 60rpx;
        height: 60rpx;
        width: 150rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        &.selection {
          background-color: $u-warning;
          margin-bottom: 10rpx;
        }
      }
    }
  }
}

.product-list {
  padding: 20rpx 20rpx 200rpx 20rpx;

  .demo-warter {
    border-radius: 8px;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
    margin: 10rpx;
  }

  .demo-image {
    width: 100%;
    height: 300rpx;
    border-radius: 4px;
  }

  .demo-title {
    font-size: 30rpx;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .sub_title {
    color: #999999;
    font-size: 24rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .demo-price {
      font-size: 30rpx;
      color: #ff0000;
      margin-top: 5px;
    }
  }

  .demo-shop {
    font-size: 22rpx;
    margin-top: 5px;
  }
}
</style>
